<template>
  <div id="changedialog">
    <commonformdialog
      :isshowDialogs="isshowDialog"
      :dialogTitle="dialogTitle"
      @closetextDialog="closetextDialog"
      @confirmbtn="confirmbtn"
    >
      <div class="changetab">
        <div class="innerLoding">
          <div class="d-el-bottom">
            <div class="d-el-list">
              <ul v-if="gjdwList.length>0">
                <li v-for="(item, index) in gjdwList" :key="index">
                  <div class="d-el-list-title" style="fontweight: bold">
                    <span>变更人:{{ item.user_id }}</span>
                    <span style="margin-left: 20px"
                      >变更日期：{{ item.create_time }}</span
                    >
                  </div>
                  <div class="d-el-list-desc">
                    <p>{{ item.content }}</p>
                  </div>
                </li>
              </ul>
              <p v-else style="textAlign:center;">暂无记录</p>
            </div>

            <el-row>
              <el-col :span="24" class="pagination">
                <el-pagination
                  v-if="gjdwList.length>0"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :page-sizes="[10, 20]"
                  :page-size="10"
                  background
                  :current-page.sync="page"
                  layout="total, sizes, prev, pager, next"
                  :total="pagination.total"
                >
                </el-pagination>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </commonformdialog>
  </div>
</template>

<script type="text/javascript">
//引入弹窗
import commonformdialog from "@/components/commondialog/commondialog";
import { contactsRead } from "@/api/contacts";
// 请求接口

import {
  followrecord,
  followrecordCreate,
  contactsOption,
} from "@/api/schoolResources";
export default {
  data() {
    return {
      bjisshowDialog: false,
      bjdialogTitle: "编辑联系人",
      bjformtype: 1,
      followContent: "",
      pagination: {},
      bjdialogdata: {},
      gjdwList: [],
      linkmanList: [],
      formData: {
        follow_time: new Date(),
        contact_id: "",
        followContent: "",
      },
      page: 1,
      rows: 10,
    };
  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
      required: true,
    },
    //表单的名字
    dialogTitle: {
      type: String,
      default: "",
      required: true,
    },
    //是编辑还是新增
    formType: {
      type: Number,
      default: 0,
    },

    dialogdata: {
      type: Object,
    },
  },
  components: {
    commonformdialog,
  },
  methods: {
    closetextDialog() {
      this.$emit("closedialog");
    },
    bjconfirm() {
      this.bjisshowDialog = false;
      this.getgjList();
      this.getuniversityOption();
    },
    bjclosedialog() {
      this.bjisshowDialog = false;
    },

    handleSizeChange(val) {
      this.rows = val;
      this.getgjList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getgjList();
    },
    // 获取跟进记录列
    async getgjList() {
      const params = {
        objectId: this.dialogdata.objectId,
        objectType: this.dialogdata.objectType,
        page: this.page,
        rows: this.rows,
      };
      const data = await followrecord(params);
      if (data.code == "0000") {
        this.gjdwList = data.data.list;
        // 跟进列表的总页数
        this.pagination = data.data.page;
      }
    },
    //获取选项
    async getuniversityOption() {
      const params = {
        objectId: this.dialogdata.objectId,
        objectType: this.dialogdata.objectType,
      };
      let data = await contactsOption(params);
      this.linkmanList = data.data;
    },

    confirmbtn() {
      this.$emit("closedialog");
    },
  },
  watch: {
    isshowDialog: function (val) {
      if (!val) {
        this.$refs["ruleForm"].resetFields();
      } else {
        this.getgjList();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-tabs--border-card > .el-tabs__header {
    background-color: #f8f8f8;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    color: #303133;
  }
  .el-tabs--border-card {
    box-shadow: none;
  }
}
.changetab {
  min-height: 500px;
}
.followpagearea {
  margin-top: 20px;
}
.d-el-title {
  background-color: #f8f8f8;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  box-sizing: border-box;
  color: #303133;
  font-size: 15px;
  border: 1px solid #e1e1e1;
}
.d-el-textarea {
  margin-top: -1px;

  textarea {
    width: 100%;
    height: 120px;
    border: none;
    outline: none;
    border: 1px solid #e1e1e1;
    resize: none;
    padding: 20px;
    box-sizing: border-box;
    color: #666;
  }
}
.d-el-button {
  margin-top: 20px;
}
.d-el-list-title {
  color: #303133;
  font-size: 15px;
  margin: 8px 0;
}
.d-el-bottom {
  margin-top: 20px;
  background-color: #fff;
  box-sizing: border-box;
}

.d-el-list-desc {
  display: flex;
  align-items: center;
  margin-top: 10px;
  span {
    color: #999;
    font-size: 13px;
    margin-right: 10px;
  }
}
.listTitle {
  font-weight: 700;
  font-size: 14px;
  color: #606266;
}
.d-el-list {
  li {
    margin-top: 10px;
    border-bottom: 1px solid #e1e1e1;
    padding: 10px 0;
    list-style: none;
  }
}
</style>
